<template>
  <div class="flex flex-col h-full overflow-hidden">
    <app-header :show-back-button="true"/>
    <main class="flex-1 p-6 overflow-y-auto">
      <div v-if="currentFlow" class="max-w-4xl mx-auto">
        <h2 class="text-xl font-semibold mb-2">{{ currentFlow.name }}</h2>
        <p class="text-gray-600 mb-6">{{ currentFlow.description }}</p>
        
        <div class="bg-white p-4 rounded-lg shadow">
          <div ref="mermaidContainer" class="mermaid">
            {{ currentFlow.diagram }}
          </div>
        </div>
      </div>
      <div v-else class="text-center text-gray-600">
        未找到指定的流程图
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import mermaid from 'mermaid'

const route = useRoute()
const mermaidContainer = ref(null)

// 初始化 Mermaid
mermaid.initialize({
  startOnLoad: false,
  theme: 'default',
  securityLevel: 'loose'
})

const flowDiagrams = {
  'winding-machine-basic': {
    name: '绕线机基本流程',
    description: '绕线机设备的基本工作流程，包含安全门检测、气压检测等基础功能',
    diagram: `graph LR
      A[开始] --> B{安全门关闭?}
      B -- 是 --> C{气压正常?}
      B -- 否 --> D[报警提示]
      D --> B
      C -- 是 --> E[设备初始化]
      C -- 否 --> F[报警提示]
      F --> C
      E --> G[待机状态]
      G --> H{启动信号?}
      H -- 是 --> I[执行绕线]
      H -- 否 --> G
      I --> J{完成信号?}
      J -- 是 --> K[停止运行]
      J -- 否 --> I
      K --> G`
  },
  'winding-machine-mes': {
    name: '绕线机MES流程',
    description: '绕线机与MES系统交互的完整流程，包含扫码、数据上传等功能',
    diagram: `graph LR
      A[开始] --> B{扫码SN}
      B --> C{MES校验}
      C -- 成功 --> D[获取工艺参数]
      C -- 失败 --> E[提示错误]
      E --> B
      D --> F[执行绕线]
      F --> G[采集数据]
      G --> H{数据上传MES}
      H -- 成功 --> I[完成]
      H -- 失败 --> J[重试上传]
      J --> H`
  },
  'winding-machine-error': {
    name: '绕线机异常处理流程',
    description: '绕线机运行过程中的异常情况处理流程',
    diagram: `graph TD
      A[检测异常] --> B{异常类型}
      B -- 安全门异常 --> C[停止设备]
      B -- 气压异常 --> D[暂停运行]
      B -- 张力异常 --> E[调整张力]
      B -- 断线 --> F[停止并报警]
      C --> G[报警提示]
      D --> G
      E --> H{可否恢复?}
      F --> G
      G --> I[等待处理]
      H -- 是 --> J[继续运行]
      H -- 否 --> K[停止任务]`
  },
  'winding-machine-maintenance': {
    name: '绕线机维护流程',
    description: '绕线机日常维护和保养流程指南',
    diagram: `graph TD
      A[开始维护] --> B[检查安全门]
      B --> C[检查气压系统]
      C --> D[检查张力器]
      D --> E[检查导线器]
      E --> F[检查编码器]
      F --> G[测试运行]
      G --> H{测试结果}
      H -- 正常 --> I[记录维护]
      H -- 异常 --> J[进一步维修]
      I --> K[完成]
      J --> L[联系维修]`
  },
  'winding-machine-parameter': {
    name: '绕线机参数设置流程',
    description: '绕线机张力、圈数等工艺参数的配置流程',
    diagram: `graph TD
      A[进入参数设置] --> B[选择产品型号]
      B --> C[设置绕线张力]
      C --> D[设置绕线圈数]
      D --> E[设置绕线速度]
      E --> F[设置绕线间距]
      F --> G[保存参数]
      G --> H{参数验证}
      H -- 有效 --> I[应用参数]
      H -- 无效 --> J[参数错误提示]
      J --> B
      I --> K[完成设置]`
  }
}

const currentFlow = ref(null)

const renderDiagram = async () => {
  if (!mermaidContainer.value || !currentFlow.value) return
  
  try {
    const { svg } = await mermaid.render(
      'mermaid-svg-' + Date.now(),
      currentFlow.value.diagram
    )
    mermaidContainer.value.innerHTML = svg
  } catch (error) {
    console.error('Mermaid rendering error:', error)
    mermaidContainer.value.innerHTML = '流程图渲染失败'
  }
}

watch(() => route.params.id, (newId) => {
  currentFlow.value = flowDiagrams[newId] || null
  if (currentFlow.value) {
    renderDiagram()
  }
}, { immediate: true })

onMounted(() => {
  if (currentFlow.value) {
    renderDiagram()
  }
})
</script>

<style scoped>
.mermaid {
  overflow-x: auto;
}
</style>